<template>
  <client-only>
    <div class="home page-component">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in 2" :key="item">
          <img src="~assets/images/web-banner1.png" alt=""/>
        </el-carousel-item>
      </el-carousel>
      <!-- 搜索   v-model="state" -->
      <div class="search-container">
        <div class="search-wrapper">
          <div class="hospital-search">
            <el-autocomplete
                class="search-input"
                prefix-icon="el-icon-search"
                v-model="state"
                :fetch-suggestions="querySearchAsync"
                placeholder="点击输入医院名称"
                @select="handleSelect"
            >
              <span slot="suffix" class="search-btn v-link highlight clickable selected">搜索 </span>
            </el-autocomplete>
          </div>
        </div>
      </div>

      <!-- bottom -->
      <div class="bottom">
        <div class="left">
          <div class="home-filter-wrapper">
            <div class="title">医院</div>
            <div>
              <div class="filter-wrapper">
                <span class="label">等级：</span>
                <div class="condition-wrapper">
                <span
                    class="item v-link clickable"
                    :class="hostypeActiveIndex == index ? 'selected' : ''"
                    v-for="(item, index) in hostypeList"
                    :key="item.id"
                    @click="hostypeSelect(item.value, index)"
                >{{ item.name }}</span
                >
                </div>
              </div>
              <div class="filter-wrapper">
                <span class="label">地区：</span>
                <div class="condition-wrapper">
                <span
                    class="item v-link clickable"
                    :class="provinceActiveIndex == index ? 'selected' : ''"
                    v-for="(item, index) in districtList"
                    :key="item.id"
                    @click="districtSelect(item.value, index)"
                >{{ item.name }}</span
                >
                </div>
              </div>
            </div>
          </div>
          <div class="v-scroll-list hospital-list">
            <div
                class="v-card clickable list-item"
                v-for="item in list"
                :key="item.id"
            >
              <div class="">
                <div
                    class="hospital-list-item hos-item"
                    index="0"
                    @click="show(item.hoscode)"
                >
                  <div class="wrapper">
                    <div class="hospital-title">{{ item.hosname }}</div>
                    <div class="bottom-container">
                      <div class="icon-wrapper">
                      <span class="iconfont"></span
                      >{{ item.param.hosptypeString }}
                      </div>
                      <div class="icon-wrapper">
                        <span class="iconfont"></span>每天{{
                          item.bookingRule.releaseTime
                        }}放号
                      </div>
                    </div>
                  </div>
                  <img
                      :src="'data:image/jpeg;base64,' + item.logoData"
                      :alt="item.hosname"
                      class="hospital-img"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="common-dept">
            <div class="header-wrapper">
              <div class="title">常见科室</div>
              <div class="all-wrapper">
                <span>全部</span>
                <span class="iconfont icon"></span>
              </div>
            </div>
            <div class="content-wrapper">
              <span class="item v-link clickable dark">神经内科 </span>
              <span class="item v-link clickable dark">消化内科 </span>
              <span class="item v-link clickable dark">呼吸内科 </span>
              <span class="item v-link clickable dark">内科 </span>
              <span class="item v-link clickable dark">神经外科 </span>
              <span class="item v-link clickable dark">妇科 </span>
              <span class="item v-link clickable dark"> 产科 </span>
              <span class="item v-link clickable dark">儿科 </span>
            </div>
          </div>
          <div class="space">
            <div class="header-wrapper">
              <div class="title-wrapper">
                <div class="icon-wrapper">
                  <span class="iconfont title-icon"></span>
                </div>
                <span class="title">平台公告</span>
              </div>
              <div class="all-wrapper">
                <span>全部</span>
                <span class="iconfont icon"></span>
              </div>
            </div>
            <div class="content-wrapper">
              <div class="notice-wrapper">
                <div class="point"></div>
                <span class="notice v-link clickable dark"
                >关于延长北京大学国际医院放假的通知
              </span>
              </div>
              <div class="notice-wrapper">
                <div class="point"></div>
                <span class="notice v-link clickable dark"
                >北京中医药大学东方医院部分科室医生门诊医
              </span>
              </div>
              <div class="notice-wrapper">
                <div class="point"></div>
                <span class="notice v-link clickable dark">
                武警总医院号源暂停更新通知
              </span>
              </div>
            </div>
          </div>
          <div class="suspend-notice-list space">
            <div class="header-wrapper">
              <div class="title-wrapper">
                <div class="icon-wrapper">
                  <span class="iconfont title-icon"></span>
                </div>
                <span class="title">停诊公告</span>
              </div>
              <div class="all-wrapper">
                <span>全部</span>
                <span class="iconfont icon"></span>
              </div>
            </div>
            <div class="content-wrapper">
              <div class="notice-wrapper">
                <div class="point"></div>
                <span class="notice v-link clickable dark">
                中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告
              </span>
              </div>
              <div class="notice-wrapper">
                <div class="point"></div>
                <span class="notice v-link clickable dark">
                首都医科大学附属北京潞河医院老年医学科门诊停诊公告
              </span>
              </div>
              <div class="notice-wrapper">
                <div class="point"></div>
                <span class="notice v-link clickable dark"
                >中日友好医院中西医结合心内科门诊停诊公告
              </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </client-only>
</template>

<script>
import hospital from "../api/hospital";
import dictionary from "../api/dictionary";
import axios from "axios";


export default {
  //服务端渲染异步，显示医院列表
  async asyncData({params, error}) {
    //调用
    return hospital.findHospitalPageList(1, 10, null).then(response => {
      return {
        list: response.data.content,
        pages: response.data.totalPages
      };

    })
  },


  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data() {
    //这里存放数据",
    return {
      searchObj: {},//查询条件
      page: 1,
      limit: 10,
      state: '',
      hosname: '', //医院名称
      hostypeList: [], //医院等级集合
      districtList: [], //地区集合

      hostypeActiveIndex: 0,
      provinceActiveIndex: 0

    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.initDictionaryData();

  },
  //方法集合",
  methods: {
    //在下拉框选择某一个内容，执行下面方法，跳转到详情页面
    show(hoscode) {
      console.log("在下拉框选择某一个内容，执行下面方法、或者选择医院直接跳转")
      window.location.href = "/hospital/" + hoscode;
    },
    //在输入框输入值。弹出下拉框，显示相关内容
    querySearchAsync(queryString, cb) {
      console.log("在输入框输入值")
      this.searchObj = [];
      if (queryString == " ") return;
      hospital.findByHospNameLike(queryString).then(response => {
        for (let i = 0, len = response.data.length; i < len; i++) {
          response.data[i].value = response.data[i].hosname;
        }
        cb(response.data);
      });
    },

    //在下拉框选择某一个内容，执行下面方法，跳转到详情页面
    handleSelect(item) {
      console.log("在下拉框选择某一个内容，执行下面方法，跳转到详情页面")
      window.location.href = "/hospital/" + item.hoscode;
    },
    //根据地区查询医院
    districtSelect(districtCode, index) {
      console.log("根据地区查询医院")
      this.list = [];
      this.page = 1;
      this.provinceActiveIndex = index;
      this.searchObj.districtCode = districtCode;
      this.getList();
    },

    //查询医院列表
    getList() {
      hospital.findHospitalPageList(this.page, this.limit, this.searchObj)
          .then(response => {
            for (let i in response.data.content) {
              this.list.push(response.data.content[i]);
            }
            this.page = response.data.totalPages;
          });
    },

    //根据医院等级查询
    hostypeSelect(hostype, index) {
      console.log("根据医院等级查询")
      //准备数据
      this.list = [];
      this.page = 1;
      this.hostypeActiveIndex = index;
      // hostype为医院的类型值(1,2....)
      this.searchObj.hostype = hostype;
      //调用查询医院列表方法
      this.getList();
    },

    //查询医院等级列表 和 所有地区列表
    initDictionaryData() {
      //查询医院等级列表
      dictionary.findDictionaryByDictCode('Hostype')
          .then(response => {
            //hostypeList清空
            this.hostypeList = []
            //向hostypeList添加全部数据
            this.hostypeList.push({"name": "全部", "value": ""})
            //把接口返回数据，添加到hostypeList
            for (var i = 0; i < response.data.length; i++) {
              this.hostypeList.push(response.data[i])
            }
          }),
          //查询地区列表
          dictionary.findDictionaryByDictCode('Beijin')
              .then(response => {
                //districtList清空
                this.districtList = []
                //向districtList添加全部数据
                this.districtList.push({"name": "全部", "value": ""})
                //把接口返回数据，添加到districtList
                for (let i in response.data) {
                  this.districtList.push(response.data[i])
                }
              })
    },
    get() {
      hospital.findHospitalPageList(1, 10, null).then(response => {
        console.log(response)
        console.log(11111)
      })
    },

  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {

  },
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {

  },
  //生命周期 - 销毁之前",
  beforeDestroy() {

  },
  destroyed() {

  },
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {

  }
}
</script>

<style>

</style>

